<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p @click="count++">count:{{count}}</p>
    </div>
</body>

</html>
<script>
    // watch 回调监听函数的执行时机: 
    // watch 监听函数先执行, 然后dom,或组件才更新, 原理是因为DOM 更新异步dom 
    const { createApp, nextTick } = Vue;
    // console.log('Vue', Vue);
    const vm = createApp({
        data() {
            return {
                count: 0

            }
        },
        watch: {
            count: {
                handler(newvalue) {
                    console.log('newvalue', newvalue);
                    // 现在想获取一下当前页面中的 p 标签中内容
                    console.log('p.innerHTML-1', document.querySelector('p').innerHTML);
                    // 就想获取最新的dom 节点
                    // 第一种方式: 将获取dom 的操作放在异步任务中执行
                    setTimeout(() => {
                        console.log('p.innerHTML-2', document.querySelector('p').innerHTML);
                    }, 0)
                    // 第二种方式: 当dom 更新后执行的方法 钩子函数, vue也具有该方法
                    nextTick(() => {
                        console.log('p.innerHTML-3', document.querySelector('p').innerHTML);
                    })
                    // 第三种方法 
                    console.log('p.innerHTML-4', document.querySelector('p').innerHTML);
                },
                flush: 'post' // vue3新增的


            }

        }
    }).mount('#app') 
</script>